<template>
    <div style="height: 100%;">
        <div class="screen-header" style="background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%);">
            <div class="iconAndtext">
                <img src="../../assets/images/dangqi.png" class="titleImg">
                <span class="title" style="color: rgb(254, 234, 145);background-color: transparent;">{{ projectTitle }}</span>
            </div>
            <div class="btn_group">
                <el-button icon="Back" style="color: red;background-color: #feea91;border: none;;" @click="goBack">返 回</el-button>
            </div>
        </div>
        <div class="content-row">
            <div class="leftDiv">
                <div class="commonMain" style="margin-left: 15px; margin-bottom: 2.5%; height: 21%!important; background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%); border: 1px solid rgb(163, 25, 28);">
                    
                    <div class="hoverStyle-div" style="display: none;">
                        <img src="../../assets/images/HT.png">
                    </div>
                    <div class="marqueeCom" style="height: 100%!important;">
                        <div class="scoreDiv">
                            <span class="topTitle" style="position: relative;left: -7px;">【党组织信息】</span>
                        </div>
                        <div class="scoreMore"><a href="#" class="morebtn" @click="showMoreOrg">更多</a></div>
                        <div style="display: flex;align-items: center;justify-content: center;height: 75%!important;">
                            <div class="fourCol">
                                <p>组织数</p>
                                <div class="topTitle">{{ orgStatList.t1? orgStatList.t1 : 0 }}</div>
                            </div>
                            <img class="line_b" src="../../assets/images/lineb.png">
                            <div class="fourCol">
                                <p>党委数</p>
                                <div class="topTitle">{{ orgStatList.t2? orgStatList.t2 : 0 }}</div>
                            </div>
                            <img class="line_b" src="../../assets/images/lineb.png">
                            <div class="fourCol">
                                <p>总支数</p>
                                <div class="topTitle">{{ orgStatList.t3? orgStatList.t3 : 0 }}</div>
                            </div>
                            <img class="line_b" src="../../assets/images/lineb.png">
                            <div class="fourCol">
                                <p>支部数</p>
                                <div class="topTitle">{{ orgStatList.t4? orgStatList.t4 : 0 }}</div>
                            </div>
                            <img class="line_b" src="../../assets/images/lineb.png">
                            <div class="fourCol">
                                <p>党员数</p>
                                <div class="topTitle">{{ orgStatList.t5? orgStatList.t5 : 0 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="commonMain" style="margin-left: 15px; height: 77%!important; background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%); border: 1px solid rgb(163, 25, 28);">
                    
                    <div class="hoverStyle-div" style="display: none;">
                        <img src="../../assets/images/HT.png">
                    </div>
                    <div class="marqueeCom" style="width: 100%; height: 33%;">
                        <div class="table_double" style="padding: 9px 0px;">
                            <div class="left_div" style="position: relative;left: -17px;">【党员信息】</div>
                            <div class="right_div" style="display: flex;justify-content: flex-end;">
                                <span style="font-size: 14px;margin-top: 4px;">党员总数：</span>{{ memberObj.totalNum?memberObj.totalNum:0 }}人</div>
                        </div>
                        <div class="wrap_con">
                            <div class="leftItem halfBackground">
                                <div class="topHalf">
                                    <div>
                                        <img class="icons" src="../../assets/images/regule.png" alt="" />
                                    </div>
                                    <div style="margin-left: 10px;">
                                        <div class="top">正式党员数</div>
                                        <div class="bottom">
                                            <span class="topTitle" style="margin-right: 5px;position: relative;top: 2px;">{{ memberObj.formalTotalNum?memberObj.formalTotalNum:0 }}</span>
                                            <span>人</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="manAndWomenBar">
                                    <div style="display: flex;align-items: center;justify-content: center;">
                                        <img src="../../assets/images/nan1.png" v-for="elem in memberObj.formalMaleCount"/>
                                        <img src="../../assets/images/nv1.png" v-for="elem in memberObj.formalFemaleCount"/>
                                    </div>
                                    <div class="progress" style="background-color: rgb(235, 121, 144);">
                                        <div class="left slideWidth" style="background-color: rgb(80, 131, 248); color: rgb(255, 255, 255);" :style="{width: memberObj.formalMaleRate+'%'}">{{ memberObj.formalMaleRate?memberObj.formalMaleRate:0 }}%</div>
                                        <div class="right slideWidth" style="text-indent: -1em; color: rgb(255, 255, 255);" :style="{width: memberObj.formalFemaleRate+'%'}">{{ memberObj.formalFemaleRate?memberObj.formalFemaleRate:0 }}%</div>
                                    </div>
                                </div>
                            </div>
                            <div class="rightItem halfBackground">
                                <div class="topHalf">
                                    <div>
                                        <img class="icons" src="../../assets/images/prepare.png" alt="" />
                                    </div>
                                    <div style="margin-left: 10px;">
                                        <div class="top">预备党员数</div>
                                        <div class="bottom">
                                            <span class="topTitle" style="margin-right: 5px;position: relative;top: 2px;">{{ memberObj.prepareTotalNum?memberObj.prepareTotalNum:0 }}</span>
                                            <span>人</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="manAndWomen">
                                    <div style="height: 29px">
                                        <img src="../../assets/images/nan.png" alt="" />
                                        <div :style="{height: memberObj.prepareMaleRate*0.7+'px'}">
                                            <img src="../../assets/images/nan_pink.png" alt="" />
                                        </div>
                                        <p>{{ memberObj.prepareMaleRate?memberObj.prepareMaleRate:0 }}%</p>
                                    </div>
                                    <div style="height: 29px">
                                        <img src="../../assets/images/nv.png" alt="" />
                                        <div :style="{height: memberObj.prepareFemaleRate*0.7+'px'}">
                                            <img src="../../assets/images/nv_pink.png" alt="" />
                                        </div>
                                        <p>{{ memberObj.prepareFemaleRate?memberObj.prepareFemaleRate:0 }}%</p>
                                    </div>
                                    <div style="width: 100%;">
                                        <liquid-fill-chart :width="pieWidth" :dataArray="waterArray" :titleShow="titleShow" :waterTitle="waterTitle"/>
                                    </div>    
                                </div>
                            </div>
                        </div>
                    </div>
                    <img class="line_a" src="../../assets/images/line.png">
                    <div class="table_div" style="height: 31%;">
                        <div class="table_double">
                            <div class="left_div" style="color: #fff;">
                                <span class="topTitle">【党员民族比例】</span>
                                <div class="leftText">{{ memberObj.hanRate?memberObj.hanRate:0 }}%</div>
                                <div class="rightText">{{ memberObj.notHanRate?memberObj.notHanRate:0 }}%</div>
                                <div class="progressSquare" style="background-color: #5083f8;">
                                    <el-tooltip
                                        effect="customized"
                                        hide-after="0"
                                        raw-content
                                        :content="'党员民族比例<br/>汉族：'+memberObj.hanNum+'('+memberObj.hanRate+'%)'"
                                        placement="top">
                                    <div class="left slideWidth" style="background-color: #5083f8; color: #fff;" :style="{width: memberObj.hanRate+'%'}"></div>
                                    </el-tooltip>
                                    <el-tooltip
                                        effect="customized"
                                        hide-after="0"
                                        raw-content
                                        :content="'党员民族比例<br/>少数民族：'+memberObj.notHanNum+'('+memberObj.notHanRate+'%)'"
                                        placement="top">
                                        <div class="right slideWidth" style="text-indent: -1em; background-color: #61dff9; color: #fff;" :style="{width: memberObj.notHanRate+'%'}"></div>
                                    </el-tooltip>
                                </div>
                                <div style="display: flex;align-items: center; margin-left: 30px; font-size: 12px;color: #fff;">
                                    <div style="display: flex;align-items: left;margin-top: 15px;margin-right: 19px; font-size: 12px;color: #fff;">
                                        <div style="width: 25px; height: 6px;background-color: #5083f8;margin-top:7px;"></div>&nbsp;&nbsp;<span>汉族</span>
                                    </div>
                                    <div style="display: flex;align-items: left;margin-top: 15px; font-size: 12px;color: #fff;">
                                        <div style="width: 25px; height: 6px;background-color: #61dff9;margin-top:7px;"></div>&nbsp;&nbsp;<span>少数民族</span>
                                    </div>
                                </div>
                            </div>
                            <div class="right_div" style="color: #fff;margin:0px;padding:0px;">
                                <span class="topTitle">【党员学历】</span>
                                <div style="height:90px;padding-top: 19%;margin-left: 1%;">
                                    <circle-pie-chart :width="circleWidth" :circleTitle="circleMemberTitle" :dataArray="dangOrgArr" :centerBgColor="pieBgColor" :centerColor="pieTextColor"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <img class="line_a" src="../../assets/images/line.png">
                    <div class="table_div" style="height: 37%;">
                        <div class="table_double">
                            <div class="left_div">
                                <span class="topTitle">【男女比例】</span>
                                <div class="leftText">{{ memberObj.malePersonRate?memberObj.malePersonRate:0 }}%</div>
                                <div class="rightText">{{ memberObj.femalePersonRate?memberObj.femalePersonRate:0 }}%</div>
                                <div class="progressSquare" style="background-color: #5083f8;">
                                    <el-tooltip
                                        effect="customized"
                                        hide-after="0"
                                        raw-content
                                        :content="'男女比例<br/>男性：'+memberObj.malePersonNum+'('+memberObj.malePersonRate+'%)'"
                                        placement="top">
                                    <div class="left slideWidth" style="background-color: #5083f8; color: #fff;" :style="{width: memberObj.malePersonRate+'%'}"></div>
                                    </el-tooltip>
                                    <el-tooltip
                                        effect="customized"
                                        hide-after="0"
                                        raw-content
                                        :content="'男女比例<br/>女性：'+memberObj.femalePersonNum+'('+memberObj.femalePersonRate+'%)'"
                                        placement="top">
                                    <div class="right slideWidth" style="text-indent: -1em; background-color: #f76381; color: #fff;" :style="{width: memberObj.femalePersonRate+'%'}"></div>
                                    </el-tooltip>
                                </div>
                                <div style="display: flex;align-items: center; margin-left: 30px; font-size: 12px;color: #fff;">
                                    <div style="display: flex;align-items: left;margin-top: 15px;margin-right: 19px; font-size: 12px;color: #fff;">
                                        <div style="width: 25px; height: 6px;background-color: #5083f8;margin-top:7px;"></div>&nbsp;&nbsp;<span>男</span>
                                    </div>
                                    <div style="display: flex;align-items: left;margin-top: 15px; font-size: 12px;color: #fff;">
                                        <div style="width: 25px; height: 6px;background-color: #f76381;margin-top:7px;"></div>&nbsp;&nbsp;<span>女</span>
                                    </div>
                                </div>
                            </div>
                            <div class="right_div" style="color: #fff;margin:0px;padding:0px;">
                                <span class="topTitle">【男女年龄情况】</span>
                                <div style="height:90px;padding-top: 0%;margin-left: 9%;">
                                    <raddar-chart :width="circleWidth" :dataArray="ageDataArray"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="centerDiv">
                <div class="commonMain" style="margin-left: 15px; margin-bottom: 2%; height: 79%!important; background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%); border: 1px solid rgb(163, 25, 28);">
                   
                    <div class="hoverStyle-div" style="display: none;">
                        <img src="../../assets/images/HT.png">
                    </div>
                    <div class="marqueeCom" style="height: 100%;">
                        <div class="scoreDiv" style="width: 50%!important">
                            <span class="topTitle" style="position: relative;left: -7px;">【宣传阵地】</span>
                        </div>
                        <div style="overflow: hidden;margin-top: 9px;height: 40%;">
                            <ul id="contextMenu" class="context-menu" @click.self="hideContextMenu">
                                <li @click="menuItemClicked">下载图片</li>
                            </ul>
                            <el-carousel height="330px" :autoplay="false" v-model="currentIndex" @change="handleSlideChange">
                                <el-carousel-item v-for="(item, index) in newsImageList" :key="item" @contextmenu.prevent="showContextMenu($event)">
                                    <a href="#" @click="jumpNews(item)">
                                        <el-watermark :font="waterFont" :content="waterText">
                                            <el-image style="width: 100%; height: 100%; object-fit: cover;" :src="baseUrl+item.imgUrl"></el-image>
                                        </el-watermark>
                                    </a>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="content" style="height: 28%;">
                            <el-scrollbar class="scroll-container" ref="scrollRef" @mouseenter="stopScroll" @mouseleave="startScroll">
                                <ul class="left_list">
                                    <li v-for="(item, index) in newsList" :key="index">
                                        <a href="#" style="color: rgb(255, 255, 255);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" @click="jumpNews(item)">{{ item.title }}</a>
                                    </li>
                                </ul>
                            </el-scrollbar>
                        </div>
                        <img class="line_a" src="../../assets/images/line.png">
                        <div class="marqueeCom" style="width: 100%!important;height: 20%;">
                            <div style="display: flex;align-items: center;justify-content: center;height: 100%!important;">
                                <div class="fourCol" style="width: 23%!important;margin-right: 10px;">
                                    <p>网站栏目</p>
                                    <div class="topTitle" style="font-size: 14px;">{{ siteList.t2? siteList.t2 : 0 }}个栏目</div>
                                </div>
                                <img class="line_b" src="../../assets/images/lineb.png">
                                <div class="fourCol" style="width: 30%!important;margin-right: 10px;">
                                    <p>文章数</p>
                                    <div class="topTitle" style="font-size: 14px;">{{ siteList.t1? siteList.t1 : 0 }}篇</div>
                                </div>
                                <div style="width: 40%!important;height:99px;margin-right: 10%;">
                                    <circle-pie-chart :width="circleWidth" :circleTitle="circleArticleTitle" :dataArray="columnStatArr" :centerBgColor="pieBgColor" :centerColor="pieTextColor"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <div class="commonMain" style="margin-left: 15px; height: 19%!important; background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%); border: 1px solid rgb(163, 25, 28);">
                    
                    <div class="hoverStyle-div" style="display: none;">
                        <img src="../../assets/images/HT.png">
                    </div>
                    <div class="marqueeCom">
                        <div class="scoreDiv">
                            <span class="topTitle" style="position: relative;left: -7px;">【三会一课】</span>
                        </div>
                        <div class="scoreMore"><a href="#" class="morebtn" @click="jumpMeetingMore">更多</a></div>
                        <div style="display: flex;align-items: center;justify-content: center;height: 80%!important;">
                            <div class="fourCol">
                                <p>党支部党员大会</p>
                                <div class="topTitle">{{ meetingObj.t1? meetingObj.t1 : 0 }}</div>
                            </div>
                            <img class="line_b" src="../../assets/images/lineb.png">
                            <div class="fourCol">
                                <p>党支部委员会</p>
                                <div class="topTitle">{{ meetingObj.t2? meetingObj.t2 : 0 }}</div>
                            </div>
                            <img class="line_b" src="../../assets/images/lineb.png">
                            <div class="fourCol">
                                <p>党小组会</p>
                                <div class="topTitle">{{ meetingObj.t3? meetingObj.t3 : 0 }}</div>
                            </div>
                            <img class="line_b" src="../../assets/images/lineb.png">
                            <div class="fourCol">
                                <p>党课</p>
                                <div class="topTitle">{{ meetingObj.t4? meetingObj.t4 : 0 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leftDiv">
                <div class="commonMain" style="margin-left: 15px; margin-bottom: 1%; height: 55%!important; background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%); border: 1px solid rgb(163, 25, 28);">
                    
                    <div class="hoverStyle-div" style="display: none;">
                        <img src="../../assets/images/HT.png">
                    </div>
                    <div class="marqueeCom" style="height: 50%;">
                        <div class="scoreDiv">
                            <span class="topTitle" style="position: relative;left: -7px;">【组织积分排名】<em>Top5</em></span>
                        </div>
                        <div class="scoreMore"><a href="#" class="morebtn" @click="jumpOrgScore">更多</a></div>
                        <div class="fiveDiv" style="height: 85%;display: flex;align-items: left;justify-content: center;flex-direction: column;">
                            <div class="fiveItem" v-for="(item, index) in scoreSortList.t2" :key="index">
                                <div style="display: flex;">
                                    <img src="../../assets/images/first.png" class="item_img" v-if="index==0">
                                    <img src="../../assets/images/second.png" class="item_img" v-if="index==1">
                                    <img src="../../assets/images/third.png" class="item_img" v-if="index==2">
                                    <span class="item_span" v-if="index==3">4</span>
                                    <span class="item_span" v-if="index==4">5</span>
                                    <p class="des" style="color: rgb(255, 255, 255);">{{ item.deptName }}</p>
                                </div>
                                <div>
                                    <p class="result" style="color: rgb(97, 223, 249);">{{ item.scoreSum?item.scoreSum:0 }}<span style="color: #fff">分</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="marqueeCom" style="height: 50%;">
                        <div class="scoreDiv">
                            <span class="topTitle" style="position: relative;left: -7px;">【党员积分排名】<em>Top5</em></span>
                        </div>
                        <div class="scoreMore"><a href="#" class="morebtn" @click="jumpMemberScore">更多</a></div>
                        <div style="height:190px;margin-top: 0px;">
                            <horiz-bar-chart :width="pieWidth" :dataXArray="dangXArray" :dataYArray="dangYArray"/>
                        </div>
                    </div>
                </div>
                <div class="commonMain" style="margin-left: 15px; height: 44%!important; background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%); border: 1px solid rgb(163, 25, 28);">
                    
                    <div class="hoverStyle-div" style="display: none;">
                        <img src="../../assets/images/HT.png">
                    </div>
                    <div class="marqueeCom" style="height: 100%!important;">
                        <div class="scoreDiv" style="height: 10%;margin: 10px 0px!important;">
                            <span class="topTitle" style="position: relative;left: -7px;">【民主评议】</span>
                        </div>
                        <div class="scoreMore"><a href="#" class="morebtn" @click="jumpReviewMore">更多</a></div>
                        <div>
                            <el-table :data="reviewList" style="width: 100%;height: 65%!important;">
                                <el-table-column label="主题" align="left" prop="title" width="99" show-overflow-tooltip="true"/>
                                <el-table-column label="所属组织" align="left" prop="deptName" min-width="99" show-overflow-tooltip="true"/>
                                <el-table-column label="开始时间" align="left" prop="begin" width="99">
                                    <template #default="scope">
                                    <span>{{ scope.row.begin!=null? parseTime(scope.row.begin, '{y}-{m}-{d}') : '' }} </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="结束时间" align="left" prop="end" width="99">
                                    <template #default="scope">
                                    <span>{{ scope.row.end!=null? parseTime(scope.row.end, '{y}-{m}-{d}') : '' }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div style="height: 17%;margin-top: 2%;">
                            <div class="wrap_con" style="height: 100%!important;display: flex;align-items: center;justify-content: center;">
                                <div class="leftItem halfBackground" style="height: 100%!important;margin:5px 10px 5px 0px!important">
                                    <div class="topHalf" style="justify-content: left!important;">
                                        <div>
                                            <img class="icons" src="../../assets/images/zzs.png" style="width: 55px;height: 55px;" />
                                        </div>
                                        <div style="margin-left: 10px;">
                                            <div class="top">开展组织数</div>
                                            <div class="bottom">
                                                <span class="topTitle" style="margin-right: 5px;position: relative;top: 2px;">{{ reviewStatObj.t1?reviewStatObj.t1 : 0 }}</span>   
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightItem halfBackground" style="height: 100%!important;margin:0px!important">
                                    <div class="topHalf" style="justify-content: left!important;">
                                        <div>
                                            <img class="icons" src="../../assets/images/icon_member.png" style="width: 55px;height: 55px;" />
                                        </div>
                                        <div style="margin-left: 10px;">
                                            <div class="top">参与党员数</div>
                                            <div class="bottom">
                                                <span class="topTitle" style="margin-right: 5px;position: relative;top: 2px;">{{ reviewStatObj.t2? reviewStatObj.t2 : 0 }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { meetingStat, memberStat, myData, OrgStat, reviewStat, scoreStat, webStat } from "@/api/partybuilding/DataDriver";
import { reviewBigList } from "@/api/partybuilding/Review";
import { listNews } from "@/api/partybuilding/News";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const projectTitle = import.meta.env.VITE_APP_TITLE;
const { proxy } = getCurrentInstance();
const router = useRouter();
import useAppStore from '@/store/modules/app'
import CirclePieChart from "../dashboard/CirclePieChart.vue";
import LiquidFillChart from "../dashboard/LiquidFillChart.vue";
import RaddarChart from "../dashboard/RaddarChart.vue";
import HorizBarChart from "../dashboard/HorizBarChart.vue";
import { ref } from "vue";
const appStore = useAppStore()
const pieTextColor = "#fff"
const pieBgColor = "#292e78"
const pieWidth = "100%"
const circleWidth = "75%"
const dangOrgArr = ref([]);
const columnStatArr = ref([]);
const waterArray = ref([]);
const titleShow = true
const waterTitle = "年轻干部"
const newsList = ref([]);
const newsImageList = ref([]);
const siteList = ref([]);
const scoreSortList = ref([]);// 积分排名
const dangXArray = ref([]);
const dangYArray = ref([]);
const reviewList = ref([]);
const reviewStatObj = ref({});
const meetingObj = ref({});// “三会一课”
const orgStatList = ref([]);// 组织统计
const ageDataArray = ref([]);// 年龄分布
const circleArticleTitle = ref("栏目文章数");
const circleMemberTitle = ref("党员学历");
const waterFont = reactive({
  color: 'rgba(0, 0, 0, .49)',
})
const waterText = 'admin 2025-02-14';
const currentIndex = ref(0);
const menuPosition = reactive({
    x: 0,
    y: 0
});
const maleAgeAgeObj = {
    value: [0, 0, 0, 0, 0, 0],
    name: '男',
    itemStyle: {
        normal: {
            lineStyle: {
                color: '#5ac6e7'
            }
        }
    },
    areaStyle: {
        color: 'rgba(70, 135, 181, 0.9)'
    }
};
const femaleAgeAgeObj = {
    value: [0, 0, 0, 0, 0, 0],
    name: '女',
    itemStyle: {
        normal: {
            lineStyle: {
                color: '#e27a93'
            }
        }
    },
    areaStyle: {
        color: 'rgba(221, 121, 147, 0.9)'
    }
};
const dataObj = reactive({
    queryNewsParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: 100
    },
});
const { queryNewsParams } = toRefs(dataObj);
const memberObj = ref({
    t1: [],//党员信息
    t2: [],//汉族人数
    t3: [],//学历
    t4: [],//男女比例
    t5: []//党龄分布
});// 党员数量统计

/* 设置 el-scrollbar 自动滚动 */
const scrollRef = ref(null)
let timer = null
const SCROLL_SPEED = 2 // 每次滚动的像素数，可以根据需要调整
 
const startScroll = () => {
  if (timer) {
    clearInterval(timer)
  }
  timer = setInterval(() => {
    // 获取滚动容器
    const container = scrollRef.value.$el.querySelector('.el-scrollbar__wrap')
    // 判断是否已滚动到底部
    if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 1) {
      // 滚动到顶部
      container.scrollTop = 0
    } else {
      // 向下滚动
      container.scrollTop += SCROLL_SPEED
    }
  }, 30) // 根据需要调整滚动间隔
}
 
const stopScroll = () => {
  if (timer) {
    clearInterval(timer)
  }
}
// 监听点击事件，确保只有在点击空白处时才阻止右键菜单
document.addEventListener('click', function(event) {
    // 检查点击的目标是否不是特定的元素（例如，一个链接或者按钮），如果是，则不阻止右键菜单
    if (event.target.nodeName !== 'UL') {
        // 再次调用preventDefault来确保在点击空白处时不显示右键菜单
        hideContextMenu();
    }
}, false);
function showContextMenu(event) {
    // 阻止浏览器默认的右键菜单
    event.preventDefault();
    // 记录菜单显示的位置
    var menu = document.getElementById('contextMenu');
    menu.style.left = event.clientX + 'px';
    menu.style.top = event.clientY + 'px';
    // 显示菜单
    menu.style.display = 'block';
}
function hideContextMenu() {
    // 隐藏菜单
    var menu = document.getElementById('contextMenu');
    menu.style.display = 'none'; // 点击其他地方隐藏菜单
}

function handleSlideChange(newIndex){
    currentIndex.value = newIndex;
}

function menuItemClicked() {
    const img = new Image();
    img.crossOrigin = 'Anonymous'; // 允许跨域
    console.log("currentIndex.value=", currentIndex.value);
    console.log(newsImageList.value[currentIndex.value].imgUrl);
    img.src = baseUrl+newsImageList.value[currentIndex.value].imgUrl;

    img.onload = async () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // 旋转 45 度让文字变倾斜
        ctx.rotate((3.14 / 180) * -22);
        // 设置水印字体和样式
        ctx.font = '20px Arial';
        ctx.fillStyle = 'rgba(0, 0, 0, .49)';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        for (var i=0; i<=10; i++) {
            for (var j=0; j<=10; j++) {
                // 设置水印文字
            ctx.fillText(waterText, i * 190-j*90, j * 130);
            }
        }

        canvas.toBlob(blob => {
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = 'image.png'; // 设置下载的文件名
          link.click();

          // 释放URL对象
          URL.revokeObjectURL(url);
        }, 'image/png');
    };
    // 隐藏菜单
    hideContextMenu();
}


// 初始化数据
function initData() {
    // 会议统计
    meetingStat().then(response => {
        meetingObj.value = response.data;
    });
    // 党员统计
    memberStat().then(response => {
        memberObj.value = response.data;
        let totalNum = memberObj.value.t1[0][0];
        memberObj.value.totalNum = totalNum;//党员总数
        memberObj.value.formalTotalNum = memberObj.value.t1[4][0];//正式党员
        memberObj.value.formalMaleNum = memberObj.value.t1[5][0];//正式男党员
        memberObj.value.formalFemaleNum = memberObj.value.formalTotalNum-memberObj.value.formalMaleNum;//正式女党员
        memberObj.value.formalMaleRate = Math.round(memberObj.value.formalMaleNum/memberObj.value.formalTotalNum*100);//正式男党员比例
        memberObj.value.formalFemaleRate = 100-memberObj.value.formalMaleRate;//正式女党员比例
        memberObj.value.formalMaleCount = Math.round(memberObj.value.formalMaleRate/10);//正式男党员人员图片个数
        memberObj.value.formalFemaleCount = 10-memberObj.value.formalMaleCount;//正式女党员人员图片个数
        
        memberObj.value.prepareTotalNum = memberObj.value.t1[1][0];//预备党员
        memberObj.value.prepareMaleNum = memberObj.value.t1[2][0];//预备男党员
        memberObj.value.prepareFemaleNum = memberObj.value.prepareTotalNum-memberObj.value.prepareMaleNum;//预备女党员
        memberObj.value.prepareMaleRate = Math.round(memberObj.value.prepareMaleNum/memberObj.value.prepareTotalNum*100);//预备男党员比例
        memberObj.value.prepareFemaleRate = 100-memberObj.value.prepareMaleRate;//预备女党员比例

        let tmp = memberObj.value.t1[3][0];//35岁前预备党员数
        let tmpRate = Math.round(tmp/memberObj.value.prepareTotalNum*100)/100;
        waterArray.value = [];
        waterArray.value.push({
            value: tmpRate,
            itemStyle: {
                color: '#11efff'
            }});

        memberObj.value.hanNum = memberObj.value.t2;//党员汉族人数
        memberObj.value.hanRate = Math.round(memberObj.value.hanNum/totalNum*100);//党员汉族比例
        memberObj.value.notHanNum = totalNum-memberObj.value.hanNum;//党员少数民族人数
        memberObj.value.notHanRate = 100-memberObj.value.hanRate;//党员少数民族比例

        let tmpDegreeArray = memberObj.value.t3;//党员学历
        dangOrgArr.value = [];
        tmpDegreeArray.forEach(item => {
            dangOrgArr.value.push({ value: item[0], name: item[1] });
        });

        memberObj.value.malePersonNum = memberObj.value.t4;//党员男性人数
        memberObj.value.malePersonRate = Math.round(memberObj.value.malePersonNum/totalNum*100);;//党员男性比例
        memberObj.value.femalePersonNum = totalNum-memberObj.value.malePersonNum;//党员女性人数
        memberObj.value.femalePersonRate = 100-memberObj.value.malePersonRate;//党员女性比例

        // 处理党员年龄分布
        handleAgeData(memberObj.value);
    });
    // 党组织统计
    OrgStat().then(response => {
        orgStatList.value = response.data;
    });
    // 评议统计
    reviewStat().then(response => {
        reviewStatObj.value = response.data;
    });
    // 民主评议
    reviewBigList({pageNum: 1, pageSize: 5}).then(response => {
        reviewList.value = response.rows;
    });
    // 积分排名
    scoreStat().then(response => {
        scoreSortList.value = response.data;
        dangXArray.value = [];
        dangYArray.value = [];
        if (scoreSortList.value.t1!=null && scoreSortList.value.t1.length>0) {
            scoreSortList.value.t1.forEach(item=>{
                dangXArray.value.push(item.scoreSum);
                dangYArray.value.push(item.nickName);
            })
        }
    });
    // 站点统计
    webStat().then(response => {
        siteList.value = response.data;
        columnStatArr.value = [];
        let tmpArray = siteList.value.t3;
        tmpArray.forEach(item => {
            item.name = item.key;
        });
        columnStatArr.value = tmpArray;
    });
    // 查询新闻列表
    getLastNews();
    // 查询热点排名列表
    getHotList();
}
// 党组织更多
function showMoreOrg() {
    window.open('/org/Org', 'MyWindow');
}

// 跳转到新闻
function jumpNews(row) {
    window.open('/web/News?id='+row.id, 'MyWindow');
}

// 跳转到三会一课更多
function jumpMeetingMore() {
    window.open('/work/MeetingList', 'MyWindow');
}

// 跳转到组织积分排名更多
function jumpOrgScore() {
    window.open('/work/scoreManage/orgScore', 'MyWindow');
}

// 跳转到党员积分排名更多
function jumpMemberScore() {
    window.open('/work/scoreManage/WorkScore', 'MyWindow');
}

// 跳转到民主评议更多
function jumpReviewMore() {
    window.open('/work/Review', 'MyWindow');
}

// 返回
function goBack() {
    window.open('/', 'MyWindow');
}

// 处理党员年龄分布
function handleAgeData(data) {
    let maleAgeData = data.t5;//男性年龄分布
    let femaleAgeData = data.t6;//女性年龄分布
    ageDataArray.value = [];
    //整合男年龄分布数据
    maleAgeAgeObj.value = getAgeDataArray(maleAgeData);
    ageDataArray.value.push(maleAgeAgeObj);

    //整合女年龄分布数据
    femaleAgeAgeObj.value = getAgeDataArray(femaleAgeData);
    ageDataArray.value.push(femaleAgeAgeObj);
}
function getAgeDataArray(dataArray) {
    let tmpAgeArray = [];
    tmpAgeArray.push(getAgeValue(dataArray, 'A30'));
    tmpAgeArray.push(getAgeValue(dataArray, 'A35'));
    tmpAgeArray.push(getAgeValue(dataArray, 'A40'));
    tmpAgeArray.push(getAgeValue(dataArray, 'A45'));
    tmpAgeArray.push(getAgeValue(dataArray, 'A50'));
    tmpAgeArray.push(getAgeValue(dataArray, 'other'));
    return tmpAgeArray;
}
function getAgeValue(dataArray, ageName){
    let tmpObj = dataArray.find(item => {
        let tmpCount = item[0];
        let tmpAgeName = item[1];
        if (tmpAgeName==ageName) {
            return tmpCount;
        }else{
            return null;
        }
    });
    if (tmpObj!=null) {
        return tmpObj[0];
    }else{
        return 0;
    }
}

// 查询新闻列表
function getLastNews() {
    listNews(queryNewsParams.value).then(response => {
        newsList.value = response.rows;
    });
}

// 查询热点排名列表
function getHotList() {
    let param = {
        pageNum: 1,
        pageSize: 11,
        deptId: 100,
        isscroll: 0 //是否幻灯片：0是，1否
    };    
    listNews(param).then(response => {
        let imagesList = response.rows;
        newsImageList.value = [];
        imagesList.forEach(item => {
            if (item.imgs) {
                let imagesArray = item.imgs.split(',');
                imagesArray.forEach(img => {
                    if (img!=null && img!='') {
                        newsImageList.value.push({id: item.id, imgUrl: img});
                    }
                });
            }
        });
    });
};

function tableRowStyle(row, rowIndex){
    return 'background-color: red;color: #ffffff;';
}

let bigScreenTimer = setInterval(() => {
    initData();
}, 300000);

onMounted(() => {
    appStore.toggleSideBarHide(true);
    document.querySelector('.navbar').remove();
    document.querySelector('.tags-view-container').remove();
    document.querySelector('.sidebar-container').remove();
    document.querySelector('.fixed-header').remove();
    document.querySelector('.fixed-top').remove();
    initData();
    startScroll()
})
onUnmounted(() => {
    stopScroll()
    clearInterval(bigScreenTimer)
});
</script>
<style>
.app-wrapper .main-container .app-main {
    height: 100%!important;
    background: linear-gradient(to right bottom, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%)!important;
}
.scroll-container {
  height: 100%!important;
  overflow: hidden;
  margin-top: 9px;
}
.scroll-content {
  height: 600px; /* 足够高以确保滚动 */
}

.el-popper.is-customized {
  padding: 15px;
  background-color: #ffffff;
  border: 1px solid rgb(255, 219, 117);
  margin: 0;
  font-size: 14px;
  color: rgb(102, 102, 102);
  z-index: 99999;
}
.el-popper.is-customized .el-popper__arrow::before {
  background-color: #ffffff;
  opacity: 0.7;
  right: 0;
}
.el-table {
    --el-table-border-color: rgb(163, 25, 28)!important;
}
</style>
<style lang="scss" scoped>
::v-deep .el-table,
::v-deep .el-table tr,
::v-deep .el-table td {
  border: 1px solid rgb(203, 44, 34)!important;
  text-align: center;
}
::v-deep .el-table thead tr th {
  background-color: rgb(163, 25, 28) !important;
  border: 1px solid rgb(203, 44, 34)!important;
  text-align: center;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: rgb(163, 25, 28)!important;
  border: 1px solid rgb(203, 44, 34)!important;
}
/* 表格内背景颜色 */
::v-deep .el-table th {
    background-color: rgb(163, 25, 28)important;
    color: #ffffff !important;
}
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: rgb(163, 25, 28)!important;
    color: #ffffff !important;
}
::v-deep .el-table tr {
    background-color: rgb(163, 25, 28)!important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgb(203, 44, 34) !important;
}
:deep(.el-scrollbar__thumb) {
    background: linear-gradient(180deg, rgb(203, 44, 34) 0%, rgb(163, 25, 28) 100%);
}
.screen-header {
    min-width: 1920px;
    height: 6%;
    overflow: hidden;
}
.screen-header .iconAndtext {
    height: 100%;
    float: left;
}
img {
    vertical-align: middle;
    border-style: none;
}
.screen-header .iconAndtext .titleImg {
    width: 37px;
    height: 37px;
    margin-left: 26px;
    margin-top: -8px;
    background-color: transparent;
}
.screen-header .iconAndtext .title {
    font-size: 29px;
    font-weight: 600;
    letter-spacing: 3px;
    vertical-align: middle;
    display: inline-block;
    line-height: 60px;
    margin-left: 19px;
}
.content-row {
    display: block;
    height: 94%;
    padding-top: 0.6%;
    padding-left: 10px;
}
.content-row .hoverStyle:hover {
    background: hsla(0, 0%, 100%, .6) !important;
    cursor: pointer;
    border: 1px solid #fff;
    position: relative;
    background-size: 30px;
    z-index: 1000;
}
.content-row .hoverStyle:hover .hoverStyle-div {
    pointer-events: none;
    display: block !important;
    z-index: 1001;
    position: absolute;
    top: 50%;
    left: 48%;
}
.content-row .hoverStyle:hover .hoverStyle-div>img {
    width: 30px;
    height: 30px;
}
.content-row .centerDiv {
    position: relative;
    height: 100%!important;
    display: block;
    width: 40%;
    float: left;
}
.content-row .leftDiv {
    position: relative;
    height: 100%!important;
    display: block;
    width: 29.16%;
    float: left;
}
.commonMain {
    position: relative;
    border: 1px solid #6369c4;
}
.commonMain .angerLT {
    left: 0;
    top: 0;
}
.commonMain .angerLB {
    left: 0;
    bottom: 0;
}
.commonMain .angerRT {
    right: 0;
    top: 0;
}
.commonMain .angerRB {
    right: 0;
    bottom: 0;
}
.commonMain .anger {
    position: absolute;
    width: 8px;
    height: 8px;
}
.marqueeCom {
    width: 100%;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
}
.marqueeCom .table_tit {
    height: 76px;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.marqueeCom .table_tit .leftP {
    display: flex;
    .tit_img {
        width: 32px;
        height: 32px;
    }
    .tit_con {
        margin-left: 9px;
        font-size: 14px;
        color: #fff;
    }
}
.marqueeCom .table_tit .rightP {
    font-size: 14px;
    color: #fff;
}

.wrap_con {
    display: flex;
    height: 174px;
}

.wrap_con .halfBackground {
    width: 50%;
    background-color: rgb(163, 25, 28);
    margin: 0px 4px;
    padding: 5px 10px;
    text-align: center;
}

.wrap_con .halfBackground .topHalf {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.wrap_con .halfBackground .icons {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.manAndWomenBar {
    margin-top: 9%;
}

.manAndWomenBar img {
    width: 8%;
    margin: 0 1%;
}

.manAndWomenBar .progress {
    height: 18px;
    margin-top: 18px;
    border-radius: 30px;
    font-size: 14px;
    background-color: #eb7990;
    overflow: hidden;
}

.manAndWomenBar .progress .left {
    float: left;
    height: 18px;
    border-radius: 30px 0 0 30px;
    background-color: #5083f8;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.manAndWomenBar .progress .right {
    float: right;
    height: 18px;
    border-radius: 0 30px 30px 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.wrap_con .leftItem {
    width: 50%;
    color: #fff;
}
.wrap_con .leftItem .top {
    font-size: 14px;
    color: #fff;
}
.wrap_con .leftItem .bottom {
    font-size: 14px;
    color: #fff;
    margin-top: 9px;
}

.wrap_con .rightItem {
    width: 50%;
    color: #fff;
    height: 100%;
}
.wrap_con .rightItem .top {
    font-size: 14px;
    color: #fff;
}
.wrap_con .rightItem .bottom {
    font-size: 14px;
    color: #fff;
    margin-top: 9px;
}

.line_a{
    display: block;
    width: 100%;
    height: 2px;
    margin: 9px 0px;
}
.line_b{
    display: block;
    height: 90%;
    width: 2px;
    float: left;
}
.line_score {
    display: block;
    width: 90%;
    height: 2px;
    margin-top: 19px;
}
.manAndWomen {
    margin-top: 57px;
    display: flex;
    justify-content: center;
    margin-left: 20px;
    font-size: 14px;
    div {
        margin-right: 12px;
        position: relative;
        width: 66px;
        img {
            width: 40px;
            height: 70px;
            position: absolute;
            left: 0;
            bottom: 0;
            object-fit: unset;
        }
        div {
            width: 66px;
            overflow: hidden;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 20;
        }
        p {
            width: 43px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 30;
            text-align: center;
            line-height: 27px;
            font-size: 14px;
            color: #ffffff;
        }
    }
}
.manAndWomen .liquidChart {
    position: relative;
    top: -159px;
    left: 15px;
}
.topTitle {
    font-size: 18px;
    color: rgb(254, 234, 145);
    background-color: transparent;
}
.scoreDiv {
    width: 57%;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    text-align: left;
    font-size: 18px;
    margin: 10px 0px 0px 0px;
    color: #11efff;
}
.scoreTitle {
    margin-left: 39px;
    font-size: 18px;
}
.fiveItem {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    height: 25px;
    line-height: 25px;
    margin: 7px 0px;
    background: rgb(163, 25, 28);
    z-index: 10;
    .item_img {
        width: 21px;
        height: 25px;
        margin: 1px 0 2px 20px;
    }
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
    }
    .des {
        margin: 0 0 0 18px;
        font-size: 14px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 340px;
    }
    .result {
        color: #61dff9;
        font-size: 14px;
        margin: 0 20px 0 0;
    }
    .item_span {
        width: 19px;
        height: 19px;
        line-height: 19px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        border-radius: 50%;
        background-color: rgb(163, 25, 28);
        margin: 4px 0 4px 20px;
    }
}
.fourCol {
    width: 25%;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    padding-top: 8px;
    font-size: 14px;
}


.left_list {
    width: 90%;
    display: inline-block;
    padding: 0px;
}
.left_list li {
    overflow: hidden;
    height: 34px;
    line-height: 34px;
    padding-left: 19px;
    font-size: 14px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff!important;
}

.left_list li::before {
  content: ""; /* 伪元素需要内容，即使为空 */
  display: inline-block; /* 或者 block 都可以，视需求而定 */
  width: 11px; /* 圆圈的宽度 */
  height: 11px; /* 圆圈的高度 */
  border-radius: 50%; /* 圆形的关键：圆角 */
  margin-right: 11px;
  background-color: #61dff9; /* 圆圈的颜色 */
}

.circlePieChart {
    position: relative;
    top: -101px;
    left: 31px;
    z-index: 99999;
}

.table_div {
    width: 100%;
    position: relative;
}

.table_double {
    display: flex;
    justify-content: center;
}
.table_double .left_div {
    width: 45%;
    text-align: left;
    font-size: 18px;
    color: rgb(254, 234, 145);
    background-color: transparent;
}
.table_double .right_div {
    width: 50%;
    text-align: left;
    font-size: 18px;
    color: rgb(254, 234, 145);
    background-color: transparent;
}

.progressSquare {
    text-align: center;
    width: 70%;
    height: 30px;
    margin-top: 21%;
    margin-left: 30px;
    background-color: #eb7990;
    overflow: hidden;
    font-size: 14px;
}

.progressSquare .left {
    float: left;
    height: 30px;
    background-color: rgb(203, 44, 34);
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.leftText {
    position: relative;
    top: 37%;
    left: 34%;
    font-size: 14px;
}

.rightText {
    position: relative;
    top: 27%;
    left: 71%;
    font-size: 14px;
}

.progressSquare .right {
    float: right;
    height: 30px;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.scoreMore {
    float: right;
    margin-top: 15px;
    margin-right: 10px;
}

.scoreMore a:hover {
    color: #ff5f4c!important;
}

.el-popper.is-customized {
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}
.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}

.box-item {
    position: absolute;
    display: block;
    border-style: solid;
    white-space: nowrap;
    z-index: 9999999;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
    transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background-color: rgb(255, 255, 255);
    border-width: 1px;
    border-radius: 4px;
    color: rgb(102, 102, 102);
    font: 14px / 21px "Microsoft YaHei";
    padding: 10px;
    top: 0px;
    left: 0px;
    transform: translate3d(63px, 17px, 0px);
    border-color: rgb(255, 219, 117);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.morebtn {
    font-size: 15px;
    color: rgb(254, 234, 145);
    background-color: transparent;
    cursor: pointer;
}
.btn_group {
    float: right;
    vertical-align: middle;
    margin-top: 14px;
    margin-right: 32px;
}

.context-menu {
    display: none;
    position: fixed;
    z-index: 99999;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.context-menu li {
    padding: 8px 12px;
    cursor: pointer;
}
.context-menu li:hover {
    background-color: #eee;
}
</style>